<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test JsonRest store</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../css/skins/claro.css";
			h2 {
				margin: 12px;
			}
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			.ui-widget{
				margin: 10px;
			}
		</style>
		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/editor", "dgrid/Keyboard", "dgrid/tree", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Cache", "dojo/store/Memory", "dojo/domReady!"], 
				function(List, Grid, Selection, editor, Keyboard, tree, declare, JsonRest, Observable, Cache, Memory){
					var testStore = Observable(Cache(JsonRest({
						target:"./data/rest.php?", 
						idProperty: "id",
						query: function(query, options){
							// have to manually adjust the query to get rid of the double ?? that trips php up
							if(query.parent){
								query = "parent=" + query.parent;
							}
							return JsonRest.prototype.query.call(this, query, options);
						}
					}), Memory()));
					testStore.getChildren = function(parent, options){
						return testStore.query({parent: parent.id}, options);
					};
					var columns = [
						tree({label:'Name', field:'name', sortable: false}),
						{label:'Id', field:'id', sortable: false},
						editor({label:'Comment', field:'comment', sortable: false}, "text"),
						editor({label:'Boolean', field:'boo', sortable: false, autoSave: true}, "checkbox")
					];

					window.grid = new (declare([Grid, Selection, Keyboard]))({
						store: testStore,
						getBeforePut: false,
						columns: columns
					}, "grid");
					deleteSelected = function(){
						for(var i in grid.selection){
							testStore.remove(i);
						}
					}
				});
				
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with JsonRest store</h2>
		<div id="grid"></div>
		<button onclick='deleteSelected()'>Delete Page</div>
		<button onclick='grid.save();'>Save</div>
		<button onclick='grid.revert();'>Revert</div>
	</body>
</html>
